{% extends 'base.html' %}
{% block content %}

    <div class="container ">
        <div class="jumbotron" id="head">
            <h1 id="index">客户端性能</h1>
        </div>
        <div class="jumbotron" id="devicetable">
            <div class="row" id="manage">
                <button class='btn btn-primary' id="batch_archive" data-target="#archive-modal"
                        onclick="onarchive()">归档
                </button>
                <script>
                    $("#batch_archive").prop("disabled", true);
                </script>
                <button class='btn btn-primary' id="task" data-target="#task-modal">添加任务</button>
{#                <button class="btn btn-primary" id="exprot" data-target="#" onclick="doexport();">导出报告</button>#}
                <script>
                    $("#exprot").prop("disabled", true);
                </script>
                {#添加任务弹窗#}
                <div class="modal fade" id="task-modal" role="dialog" aria-hidden="true" data-backdrop="static">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <label class="modal-title" id="exampleModalLabel">新建任务</label>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true" id="close">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <div class="form-group">
                                        <label for="recipient-name" class="col-form-label">任务名:</label>
                                        <input type="text" class="form-control" id="task-name">
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取&nbsp;消</button>
                                <button type="button" class="btn btn-primary" id="submit" onclick=addtask()>确&nbsp;定
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                {#归档弹窗#}
                <div class="modal fade" id="archive-modal" role="dialog" aria-hidden="true" data-backdrop="static">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <label class="modal-title" id="exampleModalLabel">归档</label>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true" id="close">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                        <th scope="col">
                                            <label>
                                                <input type="checkbox" class="checkbox" id="selAll_archive">
                                            </label>
                                        </th>
                                        <th scope="col">项目名</th>
                                        <th scope="col">项目ID</th>
                                        <th scope="col">创建时间</th>
                                        </thead>
                                        <tbody id="gameproject"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取&nbsp;消</button>
                                <button type="button" class="btn btn-primary" id="submit" onclick=addarchive()>确&nbsp;定
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
{#                发送报告#}
                <!-- 模态框（Modal） -->
                <div class="modal fade" id="myexport" role="dialog" aria-hidden="true" data-backdrop="static">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                                </button>
                                　　<h4 class="modal-title" id="myModalLabel">编辑器报告内容</h4>
                            </div>
                            <div class="modal-body " id="id_modal_body">

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" id="btn_modal_update" >导出报告</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script>
                $(document).ready(function () {
                    $("#batch_archive").click(function () {
                        let height = window.innerHeight;
                        let modal_height = 350;
                        let top = (height - modal_height) / 2;
                        if (top < 0) {
                            top = 0;
                        }
                        $("#archive-modal").css("top", top + "px");
                        $("#archive-modal").modal("show");
                    });
                    $("#task").click(function () {
                        let height = window.innerHeight;
                        let modal_height = 350;
                        let top = (height - modal_height) / 2;
                        if (top < 0) {
                            top = 0;
                        }
                        $("#task-modal").css("top", top + "px");
                        $("#task-modal").modal("show");
                    });
                    $("#exprot").click(function () {
                        let height = window.innerHeight;
                        let modal_height = 500;
                        let top = (height - modal_height) / 2;
                        if (top < 0) {
                            top = 0;
                        }
                        $("#myexport").css("top", top + "px");
                        $("#myexport").modal("show");
                    });
                });

            </script>
            <div>
                <br>
            </div>
            <table class="table table-hover">
                <tbody id="_tbody" class="_tbody">
                {% for data in performance_datas_list %}
                    <tr id="devicedetail_{{ data.id }}">
                        <td>
                            <label>
                                <input type="checkbox" name="record" id="selected" value="{{ data.id }}"
                                       onclick="selOne()">
                            </label>
                        </td>
                        <td>{{ data.id }}</td>
                        <td id="text" onclick="get_detail()">{{ data.create_time }}</td>
                        <td>
                            <div class="btn-group">
                        <span class="glyphicon glyphicon-option-vertical dropdown-toggle " data-toggle="dropdown"
                              aria-haspopup="true" aria-expanded="false"></span>
                                <ul class="dropdown-menu">
                                    <li class="item table-hover" id="archive"><a class="glyphicon glyphicon-inbox">&nbsp;归档</a>
                                    </li>
                                    <li class="item table-hover" id="delete"><a class="glyphicon glyphicon-trash"
                                                                                onclick="ondelete()">&nbsp;删除</a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
                <thead>
                <th itemscope="col">
                    <label>
                        <input type="checkbox" id="checkAll" name="checkAll" onclick="checkall(this)">
                    </label>
                    全选
                </th>
                <th itemscope="col">id</th>
                <th itemscope="col">创建时间</th>
                <th itemscope="col">操作</th>
                </thead>
            </table>
            {% if data %}
                <ul id="pages" class="col-lg-offset-8 pagination pagination-sm pagination-xs">
                    {% if data.first %}
                        <li><a href="?page=1">1</a></li>
                    {% endif %}
                    {% if data.left %}
                        {% if data.left_has_more %}
                            <li><span>...</span></li>
                        {% endif %}
                        {% for i in data.left %}
                            <li><a href="?page={{ i }}">{{ i }}</a></li>
                        {% endfor %}
                    {% endif %}
                    <li class="active"><a href="?page={{ data.p }}">{{ data.p }}</a></li>
                    {% if data.right %}
                        {% for i in data.right %}
                            <li><a href="?page={{ i }}">{{ i }}</a></li>
                        {% endfor %}
                        {% if data.right_has_more %}
                            <li><span>...</span></li>
                        {% endif %}
                    {% endif %}
                    {% if data.last %}
                        <li><a href="?page={{ data.total_pages }}">{{ data.total_pages }}</a></li>
                    {% endif %}
                </ul>
            {% endif %}
        </div>
    </div>

{% endblock content %}